<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>
    
    // 自定义一套事件监听系统
    function MyEvent(){
        // 用来记录不同的事件及每个事件对应的事件处理函数
        this.message = {};
        // 添加事件及事件处理函数
        this.add = function(type, cb){
            if(this.message[type]){
                this.message[type].push(cb);
            }else{
                this.message[type] = [cb];
            }
        }
        // 触发事件
        this.emit = function(type){
            if(!this.message[type]) return;
            this.message[type].forEach(val=>{
                val();
            })
        }
    }

    const ele = new MyEvent();

    // 绑定事件：构建发布者和订阅者的关系
    ele.add("qwe", fn1);
    ele.add("qwe", fn2);
    // ele.add("qwe", fn3);
    // ele.add("abc", fn2);
    // ele.add("abc", fn5);
    ele.add("abc", fn3);
    ele.add("zxc", fn4);
    ele.add("asd", fn2)
    ele.add("look", fn1)
    ele.add("look", fn2)
    ele.add("look", fn4)
    ele.add("look", fn5)

    // 查看事件系统内所有的事件和对应的事件处理函数
    console.log(ele.message);

    // 触发事件：发布信息
    ele.emit("asd");
    ele.emit("look");
    ele.emit("abc");


    function fn1(){
        console.log(1)
    }
    function fn2(){
        console.log(2)
    }
    function fn3(){
        console.log(3)
    }
    function fn4(){
        console.log(4)
    }
    function fn5(){
        console.log(5)
    }

</script>
</html>